<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">筛选查询</span>
        <!-- 收起筛选/展开筛选 -->
        <span class="text4" @click="isShow = !isShow">
          <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
          <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
        </span>
        <el-button type="primary" size="mini" class="info" @click="queryAll">查询结果</el-button>
      </div>
      <!-- 以下div为筛选查询 -->
      <div class="heade-text" v-show="isShow">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          class="heade-form"
        >
          <el-form-item label="输入搜索">
            <el-input
              v-model="form.name"
              placeholder="供货商名称："
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input
              v-model="form.contact"
              placeholder="全部"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button type="primary" size="mini" class="info1" @click="dialogVisible = true">添加</el-button>
        <el-button type="primary" size="mini" class="info">导出</el-button>
        <!-- 添加窗口 -->
        <el-dialog title="添加供应商" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
          <el-form ref="form" :model="vendor" label-width="80px">
            <el-form-item label="供货商名称">
              <el-input v-model="vendor.name"></el-input>
            </el-form-item>
            <el-form-item label="供货商地址">
              <el-input v-model="vendor.address"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="vendor.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input v-model="vendor.contactPhone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }" 
        :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="tableData" border
        tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column
            prop="name"
            label="供货商名称"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="供货商地址"
          ></el-table-column>
          <el-table-column prop="contact" label="联系人"></el-table-column>
          <el-table-column
            prop="contactPhone"
            label="联系电话"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="button" @click="deleteVen(scope.row.id)" size="small">删除</el-button>
              <el-button type="button" @click="handleEdit(scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑窗口 -->
        <el-dialog title="编辑供应商" :visible.sync="dialog2Visible" width="40%" :before-close="handleClose">
          <el-form ref="form" :model="vendor1" label-width="100px">
            <el-form-item label="编号">
              <el-input v-model="vendor1.id"></el-input>
            </el-form-item>
            <el-form-item label="供货商名称">
              <el-input v-model="vendor1.name"></el-input>
            </el-form-item>
            <el-form-item label="供货商地址">
              <el-input v-model="vendor1.address"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="vendor1.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input v-model="vendor1.contactPhone"></el-input>
            </el-form-item>
            <el-form-item label="固定电话">
              <el-input v-model="vendor1.landline"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="vendor1.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="vendor1.memo"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateVen">确定修改</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000">
            </el-pagination>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {queryVendor,deleteVendor,addVendor,updateVendor} from '@/api/vendor.js';
export default {
  data() {
    return {
      isShow: true,
      form: {
        name: "",
        contact: "",
      },
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      dialog2Visible:false,
      vendor: {
          name: "",
          address: "",
          contact: "",
          contactPhone: "",
      },
      vendor1:{}
    };
  },
  created(){
    this.queryAll();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    queryAll(){
      queryVendor(this.form.name,this.form.contact).then(res=>{
        // console.log(res);
        this.tableData=res.data.data;
        // console.log(this.tableData);
      })
    },
    deleteVen(id){
      // console.log(id);
      deleteVendor(id).then(
        response=>{
          if(response.data.code==0){
            this.queryAll();
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    onSubmit(){
      console.log(this.vendor);
      addVendor(this.vendor).then(
        res=>{
            if(res.data.code==0){
            this.queryAll();
            this.dialogVisible=false;
          }else{
            alert(res.data.msg);
          }
        },error=>{
            console.log('失败了',error);
        }
      )
    },
    handleEdit(row){
      this.dialog2Visible=true;
      this.vendor1 = row;
    },
    updateVen(){
      console.log(this.vendor1);
      updateVendor(this.vendor1).then(
        res=>{
            if(res.data.code==0){
            this.queryAll();
            this.dialog2Visible=false;
          }else{
            alert(res.data.msg);
          }
        },error=>{
            console.log('失败了',error);
        }
      )
    }
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>